<template>
  <div class="container">
    <el-dialog title="新增标签" width="25%" :visible.sync="showtags" @close="btnCancel">
      <el-form :rules="rules" class="tags-form" ref="form" :model="formData">
        <el-form-item label="所属学科" prop="subjectSelect">
          <el-select
            v-model="formData.subjectSelect"
            placeholder="请选择活动区域"
            @change="getSubjectID"
          >
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="formData.directoryName"
            autocomplete="off"
            placeholder="请输入标签名称"
            style="width: 60%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/directorys'
export default {
  props: {
    valueData: {
      type: Array,
      default: () => []
    },
    subjectId: {
      type: Number
    },

    tagsShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      directoryList: [],
      showtags: this.tagsShow,
      formData: {
        subjectSelect: '',
        directoryName: '',
        subjectID: ''
      },
      itemId: 0,
      rules: {
        subjectSelect: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    valueData (newval) {
      this.directoryList = newval
    },
    subjectId (val) {
      this.itemId = val
      if (val) {
        const newObj = this.directoryList.find(item => item.id === this.itemId)
        this.formData.subjectSelect = newObj.subjectName
        this.formData.subjectID = newObj.subjectID
        this.formData.directoryName = newObj.directoryName
      }
    },
    tagsShow (newval) {
      this.showtags = newval
    }
  },
  methods: {
    // 获取学科id
    getSubjectID (val) {
      const obj = this.directoryList.find(item => item.subjectName === val)
      this.formData.subjectID = obj.subjectID
    },
    // 取消
    btnCancel () {
      if (this.itemId) {
        this.$emit('delItemId')
      }
      this.formData = {
        subjectSelect: '',
        directoryName: '',
        subjectID: ''
      }
      this.$refs.form.resetFields()
      this.$emit('update:tagsShow', false)
    },
    // 确定
    btnOK () {
      this.$refs.form.validate()
        .then(() => {
          if (!this.itemId) {
            return add(this.formData)
          }
          return update({ ...this.formData, id: this.itemId })
        })
        .then(() => {
          this.$emit('addTags')
          this.$emit('update:tagsShow', false)
          this.$message.success('操作成功')
        })
    }
  }
}
</script>

<style scoped lang='less'></style>
